<template>
  <div>
    <template>
      <el-table
          border
          ref="multipleTable"
          :data="MyArticle"
          highlight-current-row
          tooltip-effect="dark"
          style="width: 100%">
        <el-table-column
            prop="title"
            label="标题"
            width="280"
            :resizable="false">
        </el-table-column>
        <el-table-column
            v-if="name!=='1'"
            prop="user"
            label="作者"
            width="100"
            :resizable="false">
        </el-table-column>
        <el-table-column
            prop="status"
            label="状态"
            width="100"
            :resizable="false"
            align="center">
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <el-tag
                  :type="scope.row.status === '已发布' ? 'primary' : 'danger'"
                  size="medium">{{ scope.row.status }}
              </el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column
            prop="look_count"
            label="阅读量"
            width="100"
            :resizable="false"
            align="center"
            sortable>
        </el-table-column>
        <el-table-column
            prop="collects_count"
            label="收藏量"
            width="100"
            :resizable="false"
            align="center"
            sortable>
        </el-table-column>
        <el-table-column
            prop="comment_count"
            label="评论量"
            width="100"
            :resizable="false"
            align="center"
            sortable>
        </el-table-column>
        <el-table-column
            prop="digg_count"
            label="点赞量"
            width="100"
            :resizable="false"
            align="center"
            sortable>
        </el-table-column>
        <el-table-column
            prop="change_date"
            label="发布时间"
            width="200"
            :resizable="false"
            align="center"
            sortable>
        </el-table-column>
        <el-table-column
            label="操作"
            show-overflow-tooltip
            :resizable="false"
            align="center">
          <template slot-scope="scope">
            <div>
              <span @click="toarticle(scope.row.nid)">浏览</span>
              <span v-if="name==='1'" @click="tiEditarticle(scope.row.nid)">编辑</span>
              <span @click="del_article(scope.row.nid,name)">删除</span>
              <span>查看数据</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </template>
  </div>
</template>

<script>
import {mapActions} from 'vuex'

export default {
  name: "List", // 文章列表
  props: ['MyArticle', 'name'],
  data() {
    return {}
  },
  methods: {
    ...mapActions('ArticleList', ['delArticle', 'getMyArticle', 'getMyLikeArticle', 'getMyCollectsArticle']),
    ...mapActions('Article', ['like', 'collect']),
    // 删除文章的回调
    del_article(nid, type) {
      let title // 表示点击删除时的提示语句
      let clickmethod // 表示点击删除时调用的方法
      let endmethod //点击删除后调用的方法
      if (type === '1') {
        title = '此操作将永久删除该文章, 是否继续?'
        clickmethod = this.delArticle  // 删除文章
        endmethod = this.getMyArticle // 获取我的文章列表
      } else if (type === '2') {
        title = '此操作将删除该喜欢, 是否继续?'
        clickmethod = this.like
        endmethod = this.getMyLikeArticle
      } else if (type === '3') {
        title = '此操作将删除该收藏, 是否继续?'
        clickmethod = this.collect  // 删除文章
        endmethod = this.getMyCollectsArticle // 获取我的文章列表
      }
      let obj = {
        nid,
        usernid: this.$store.state.userinfo.nid  // 获取用户id
      }
      this.$confirm(title, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        clickmethod(obj).then(value => {
          if (value.code === 200) {
            endmethod(obj['usernid'])
          }
        })
      }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          }
      )
    },
    // 跳转到文章详情页面
    toarticle(id) {
      this.$router.push({
        name: 'article',
        params: {
          id
        }
      })
    },
    // 跳转到文章编辑页面
    tiEditarticle(id) {
      this.$router.push({
        name: "EditArticle",
        params: {
          id
        }
      })
    }
  },
}
</script>

<style scoped lang="less">
.el-table {
  .el-table__row {
    td:nth-child(1) {
      > div {
        cursor: pointer; //悬浮时变手指
      }
    }

    td:nth-child(8),td:nth-child(9) {
      a {
        margin-right: 5px;
        color: #606266;
      }

      span {
        margin-right: 5px;
        cursor: pointer; //悬浮时变手指
      }
    }
  }
}
</style>